<script lang="ts" setup>
import MyBox from '@/components/Common/MyBox.vue'
import { ref, watch } from 'vue'
const props = defineProps(['data'])

watch(
  () => props.data,
  (val) => {
    const { xList, yList } = val
    xList.reverse()
    yList.reverse()
    options.value.yAxis.data = xList
    options.value.series[0].data = yList
    //取数组最大值，小于10取10
    // const maxValue = Math.max(...yList)
    // options.value.yAxis.max = maxValue > 10 ? maxValue : 10
  }
)

const options = ref({
  grid: {
    top: 45,
    left: 90
  },
  legend: {
    textStyle: {
      color: '#ebeef5',
      fontSize: 16
    },
    data: []
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    boundaryLink: true, // 设置 tooltip 不超出容器边界
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'value',
    position: 'top',
    axisLabel: {
      color: '#ebeef5',
      fontSize: 16
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#182758',
        width: 2
      }
    },
    splitLine: {
      show: false
    }
    
  },
  yAxis: {
    type: 'category',
    name: '',
    nameTextStyle: {
      color: '#ebeef5',
      fontSize: 16,
      align: 'right',
      padding: [0, 12, 8, 0]
    },
    axisLabel: {
      color: '#ebeef5',
      fontSize: 16,
      align: 'right'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#182758',
        width: 2
      }
    },
    splitLine: {
      show: false
    },
    data: []
  },
  series: [
    {
      data: [],
      name: '',
      type: 'bar',
      label: {
        show: true,
        position: 'right',
        color: '#fff'
      },
      barWidth: 16,
      color: '#91cc75',
      itemStyle: {
        //圆角
        borderRadius: [30, 30, 30, 30]
      }
    }
  ]
})
</script>
<template>
  <MyBox title="不良统计" class="input-ratio">
    <template v-slot:main>
      <MyChart height="380px" :option="options" />
    </template>
  </MyBox>
</template>
<style lang="less" scoped>
.input-ratio {
  position: relative;
  width: calc(50% - 80px);
}

.input-ratio {
  .desc-box {
    width: 100%;
    position: absolute;
    bottom: 10px;
    left: 0;
    font-size: 18px;
    p {
      width: 60px;
      &:first-child {
        text-align: center;
        color: #fff;
      }
      &:last-child {
        border-radius: 30px;
        text-align: center;
        font-weight: 500;
      }
    }
  }
  .plan {
    p {
      &:last-child {
        // border: 2px solid #5470c6;
        color: #f39800;
      }
    }
  }
  .target {
    p {
      &:last-child {
        // border: 2px solid #91cc75;
        color: #eb6877;
      }
    }
  }
  .actual {
    p {
      &:last-child {
        // border: 2px solid #fac858;
        color: #00f2f1;
      }
    }
  }
}
.rate {
  position: absolute;
  top: 110px;
  left: 50%;
  width: 100px;
  height: 80px;
  margin-left: -50px;
  text-align: center;
  line-height: 80px;
  color: #fff;
  font-size: 26px;
}
</style>
